<template>
  <div class="container">
    <!-- Main Content -->
    <main class="main-content">
      <div class="box-card">
        <div class="card-header">
          <h1 style="text-align: center">学生综合服务管理系统</h1>
          <p>欢迎使用学生综合服务管理系统，我们为您提供一站式的学生服务解决方案。</p>
        </div>
        <div class="card-body">
          <div class="notice">
            <h2>系统简介</h2>
            <p>本系统旨在为学校提供高效的管理工具，帮助教职工和学生进行信息管理、服务查询等日常事务处理。</p>
            <h2>子系统介绍</h2>
            <h3>教材管理系统</h3>
            <p>教材管理系统用于管理教材的采购、分发和库存情况。通过该系统，教师可以提交教材需求，管理员可以处理教材的采购和分配，学生可以查看教材信息并进行相关操作。</p>
            <h3>在校生报到系统</h3>
            <p>在校生报到系统提供学生报到、信息更新等功能。学生可以进行在线报到，查看报到状态，管理员可以审核报到信息和管理学生档案。</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
/* Container Styles */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  border: 1px solid #eee;
}

/* Main Content Styles */
.main-content {
  padding: 20px;
  flex: 1;
}

/* Card Styles */
.box-card {
  margin:auto;
  width: 80%;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  margin-bottom: 20px;
}
</style>

<script>
export default {
  data() {
    return {
      // 可以在这里添加组件数据
    };
  }
};
</script>
